<template>
  <zz-dialog
    title='批量导入'
    :visible = importVisible
    :showFoot = false
    @close = "close">
    <div v-if="ftlType !== 'qualitySafe'">
      <p class="mb25"><b>操作步骤：</b></p>
      <p class="mb10">1、 下载《{{title}}》</p>
      <p class="mb10">2、 打开下载表，将对应字段信息输入或粘贴进本表。为保障粘贴信息被有效导入，请使用纯文本或数字</p>
      <p class="mb10">3、 信息输入完毕，点击 “浏览” 按钮， 选择excel文档</p>
      <p class="mb25">4、 点击 “开始导入”</p>
      <p class="mb25"><a class="color" :href="templateUrl">立即下载模版</a></p>
    </div>
    <div v-else>
      <p class="mb10">请导入本项目的质量、安全检查数据</p>
    </div>
    <zz-select
      class="mb25"
      :isFixed = true
      :border= true
      :options="{width: '334px'}"
      :option="projectList"
      :name = projectName
      @optionClick="selectCallback"
      v-if="ftlType === 'worker'"></zz-select>
    <div class="clear mb10">
      <input v-model="filePath" class="input-l270 left" readonly="readonly"/>
      <label class="uploadFile left">
        选择文件
        <input type="file" @change="changeHandler" ref="file">
      </label>
    </div>
    <div v-if="ftlType === 'qualitySafe'">
      <p class="mb25">下载模板：<a class="color" :href="templateUrl" download="安全质量问题导入模板.xls">安全质量问题导入模板.xls</a></p>
    </div>
    <div class="mb25" v-if="ftlType === 'employee'">
      <zz-check checkTip="手机绑定" @handleChange="mobileStatusHandle"></zz-check>
      <zz-check checkTip="邮箱绑定" @handleChange="emailStatusHandle"></zz-check>
    </div>
    <input class="button-block v-top" value="开始导入" type="button" @click="subData"/>
    <zz-dialog
      title='批量导入'
      :visible = errorVisible
      @confirm = "changeBut++"
      @close = "closeError">
      <div class="tableClass" style="height: 500px;" v-bar>
        <div>
          <!--错误工人模板-->
          <workerFtl
            @success="importSuccess"
            :errorPropsData = errorData
            :changeBut="changeBut"
            v-if="ftlType === 'worker'"></workerFtl>
          <!--错误员工模板-->
          <memberFtl
            @success="importSuccess"
            :errorPropsData = errorData
            :changeBut="changeBut"
            :baseUrl="baseUrl"
            :mobileStatus="mobileStatus"
            :emailStatus="emailStatus"
            v-if="ftlType === 'employee'"></memberFtl>
        </div>
      </div>
    </zz-dialog>
  </zz-dialog>
</template>

<script>
  import workerFtl from './workerFtl.vue'
  import memberFtl from './memberFtl.vue'
  import wifiTemplateFtl from './wifiTemplateFtl.vue'
  export default {
    data () {
      return {
        ftlType: '',
        filePath: '',
        importVisible: false,
        errorVisible: false,
        templateUrl: '',
        actionUrl: '',
        stageId: '',
        errorData: [],
        changeBut: 0,
        projectList: {},
        projectId: '',
        projectName: '请选择项目',
        mobileStatus: 2,
        emailStatus: 2,
        file: null,
        baseUrl: '',
        title: '人员批量导入模板',
        library_id: '',
        resolve: null
      }
    },
    components: {workerFtl, memberFtl, wifiTemplateFtl},
    methods: {
      open (option) {
        return new Promise(resolve => {
          this.ftlType = option.ftlType
          this.templateUrl = option.templateUrl
          this.actionUrl = option.actionUrl
          this.stageId = option.stageId
          if (this.ftlType === 'wifiTemplateFtl') {
            option.title ? this.title = option.title : this.title = 'WIFI题目导入模板'
            option.library_id ? this.library_id = option.library_id : this.library_id = ''
            this.projectId = option.pjId
          }
          option.title ? this.title = option.title : this.title = '人员批量导入模板'
          option.library_id ? this.library_id = option.library_id : this.library_id = ''
          if (option.projectList) {
            option.projectList.forEach(x => {
              this.projectList[x.pjId] = x.title
            })
          }
          this.baseUrl = option.baseUrl
          this.importVisible = true
          this.resolve = resolve
        })
      },
      selectCallback (data) {
        this.projectId = data.key
      },
      changeHandler (e) {
        this.file = e.target.files[0]
        let fileName = this.$refs.file.value
        let extName = fileName.substring(fileName.lastIndexOf('.') + 1, fileName.length)
        if (extName !== 'xls') {
          this.$message.warning('请上传excel，格式为xls')
          return false
        }
        this.filePath = fileName
      },
      mobileStatusHandle (status) {
        status ? this.mobileStatus = 1 : this.mobileStatus = 2
      },
      emailStatusHandle () {
        status ? this.emailStatus = 1 : this.mobileStatus = 2
      },
      subData () {
        const form = new window.FormData()
        if (this.$refs.file.files[0]) {
          // 导入工人
          if (this.ftlType === 'worker') {
            form.append('form.tempFile', this.$refs.file.files[0])
            if (!this.projectId) {
              this.$message.warning('请先选择项目')
              return
            }
            form.append('form.project_id', this.projectId)
            if (this.library_id) {
              form.append('form.library_id', this.library_id)
            }
          }
          // 导入员工
          if (this.ftlType === 'employee') {
            form.append('form.tempFile', this.$refs.file.files[0])
            form.append('form.mobile_status', this.mobileStatus)
            form.append('form.email_status', this.emailStatus)
          }
          // 导入wifi 题目
          if (this.ftlType === 'wifiTemplateFtl') {
            form.append('form.tempFile', this.$refs.file.files[0])
            form.append('form.library_id', this.library_id)
            form.append('form.project_id', this.projectId)
          }
          if (this.ftlType === 'qualitySafe') {
            form.append('tempFile', this.$refs.file.files[0])
            form.append('stageId', this.stageId)
          }
          this.$axios.post(this.actionUrl, form).then(res => {
            if (res.data.errorMsg) {
              this.$message.error(res.data.errorMsg)
            } else {
              if (res.data.errorData) {
                this.errorData = JSON.parse(res.data.errorData)
              }
              if (this.errorData.length > 0) {
                if (this.errorData[0].errorMsg) {
                  this.$message.error(this.errorData[0].errorMsg)
                } else {
                  this.errorVisible = true
                }
              } else {
                this.$message.success('导入成功')
                this.close()
                this.resolve()
              }
            }
          })
        } else {
          this.$message.warning('请上传文件后导入')
        }
      },
      close () {
        this.errorVisible = false
        this.importVisible = false
        this.filePath = ''
      },
      importSuccess () {
        this.close()
      },
      closeError () {
        this.errorVisible = false
      }
    }
  }
</script>

<style lang="scss" scoped>
  .uploadFile{
    @include button-l();
    margin-right: 20px;
    input[type="file"] {
      overflow: hidden;
      position: fixed;
      width: 1px;
      height: 1px;
      top: -99em;
    }
  }
</style>
